import React, { Component } from 'react';
import styled from 'styled-components'
import NameProduct from '../name_product/index'
 const Container=styled.div`
  background:#eee;
 .shop_youhui{
     margin-bottom:.08rem;
     p{
         background:#fff;
         height:.4rem;
         text-align:center;
         line-height:.4rem;
         .firstspan{
             display:inline-block
             height:100%;
             margin-right:.13rem;
             line-height:.4rem;
             vertical-align:middle
             img{
                width:.15rem;
            }
         }
         span{
            vertical-align:middle
            font-size: 14px;
            color: #333;
            font-weight: 400;
         }
     }
     .imgbox1{
         height:1.88rem;
         img{
             height:1.88rem;
         }
     }
 }
 .hot-shop{
    p{
        background:#fff;
        height:.4rem;
        text-align:center;
        line-height:.4rem;
        .firstspan{
            display:inline-block
            height:100%;
            margin-right:.13rem;
            line-height:.4rem;
            vertical-align:middle
            img{
               width:.15rem;
           }
        }
        span{
           vertical-align:middle
           font-size: 14px;
           color: #333;
           font-weight: 400;
        }
    }
    .imgbox2{
        display:flex;
        flex-wrap:wrap;
        img{
            flex:1;
            height:93.75px;
        }
    }
 }
 .metra-lists{
     display:flex;
     height:.94rem;
     margin:.08rem 0
     img{
        height:.94rem;
        flex;1
     }
 }
 .jinxuan{
    .imgbox3{
        display:flex;
        flex-wrap:wrap
        img{
            flex;1;
            height:1.87rem
        }
    }
 }
 
 `
class MonBaby extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }

    render() {
        return (
            <Container>
                <div className='shop_youhui'>
                    <p>
                        <span className='firstspan'><img src='/img/icon_title.png'></img></span>
                        <span>今日特惠</span>
                    </p>
                    <div className='imgbox1'>
                        <img src='/img/item_7710_2048_1024-ipad2048_1566378303.jpeg'></img>
                    </div>
                </div>
                <div className='hot-shop'>
                    <p>
                        <span className='firstspan'><img src='/img/icon_title.png'></img></span>
                        <span>全球热销产品</span>
                    </p>
                    <div className='imgbox2'>
                        <img src='http://mp6.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1502086238.jpeg?imageView2/2/w/160/q/90' alt='显示不出来'></img>
                        <img src='http://mp6.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1560910791.jpeg?imageView2/2/w/160/q/90' alt='显示不出来'></img>
                        <img src='http://mp6.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1498543566.jpeg?imageView2/2/w/160/q/90' alt='显示不出来'></img>
                        <img src='http://mp5.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1551235310.jpeg?imageView2/2/w/160/q/90' alt='显示不出来'></img>
                        <img src='http://mp5.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1548056454.jpeg?imageView2/2/w/160/q/90' alt='显示不出来'></img>
                        <img src='http://mp6.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1563960647.jpeg?imageView2/2/w/160/q/90' alt='显示不出来'></img>
                        <img src='http://mp5.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1548055217.png?imageView2/2/w/160/q/90' alt='显示不出来'></img>
                        <img src='http://mp5.jmstatic.com/mobile/card_material/item_2386_512_512-ipad2048_1548055580.jpeg?imageView2/2/w/160/q/90' alt='显示不出来'></img>
                    </div>
                </div>
                <div className='metra-lists'>
                    <img src='http://mp5.jmstatic.com/mobile/card_material/item_5518_1024_512-ipad2048_1565074603.jpeg?imageView2/2/w/320/q/90'></img>
                    <img src='http://mp5.jmstatic.com/mobile/card_material/item_5518_1024_512-ipad2048_1566438811.jpeg?imageView2/2/w/320/q/90'></img>
                </div>
                <div className='hot-shop jinxuan'>
                    <p>
                        <span className='firstspan'><img src='/img/icon_title.png'></img></span>
                        <span>精选活动推荐</span>
                    </p>
                    <div className='imgbox3'>
                        <img src='http://mp7.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1566543297.jpeg@base@tag=imgScale&w=320&q=90' alt='显示不出来'></img>
                        <img src='http://mp5.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1566790897.jpeg?imageView2/2/w/320/q/90' alt='显示不出来'></img>
                        <img src='http://mp5.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1566361114.jpeg?imageView2/2/w/320/q/90' alt='显示不出来'></img>
                        <img src='http://mp5.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1566469214.jpeg?imageView2/2/w/320/q/90' alt='显示不出来'></img>
                        <img src='http://mp7.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1566543297.jpeg@base@tag=imgScale&w=320&q=90' alt='显示不出来'></img>
                        <img src='http://mp5.jmstatic.com/mobile/card_material/item_5640_1024_1024-ipad2048_1566790897.jpeg?imageView2/2/w/320/q/90' alt='显示不出来'></img>
                    </div>
                </div>
                <NameProduct></NameProduct>
            </Container>
        );
    }
}

export default MonBaby;